<template>
  <div id="content">
    <!-- 走马灯图片展示 -->
    <el-carousel
      class="carousel"
      :interval="5000"
      type="card"
      indicator-position="none"
      height="300px"
    >
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <img class="carousel_img" :src="item.url" alt="" />
      </el-carousel-item>
    </el-carousel>

    <div class="timeline">
      <div class="timehead">★ 近期培训 ★</div>
      <el-divider></el-divider>
      <el-timeline
        v-infinite-scroll="getRecentRecord"
        infinite-scroll-delay="500"
      >
        <el-timeline-item
          v-for="(item, index) in recordList"
          :key="index"
          :timestamp="item.trainingDate"
          size="large"
          type="primary"
          placement="top"
        >
          <Record :record="item" />
        </el-timeline-item>
      </el-timeline>
      <div class="loading"><i class="el-icon-loading"></i></div>
    </div>
    <!-- <img src="../assets/img/IT_black.png" alt="" /> -->
    <!-- <Record class="recordCard" v-for="(item, index) in recordList" :key="index" :record="item" /> -->
  </div>
</template>
<script>
import Record from "./recentRecordCard.vue";
import Config from "../views/config.js";
export default {
  components: { Record },

  data() {
    return {
      recordList: [],
      urlPrefix: "",
      imgList: [],
      currentPage: 1,
      pageSize: 5,
    };
  },

  created() {
    this.urlPrefix = Config.picPrefixUrl;
    this.initPics();
    this.getRecentRecord();
  },

  methods: {
    async initPics() {
      if (window.sessionStorage.getItem("carousel") != null) {
        this.imgList = JSON.parse(window.sessionStorage.getItem("carousel"));
        console.log("已从本地获得carousel！", this.imgList);
        return;
      }
      const res = await this.$axios.get(`${this.HOST}/config/api/carousel`);
      console.log("获取轮播图成功！", res.data.data);
      this.imgList = [];
      res.data.data.carousel.forEach((element) => {
        element.url = Config.picPrefixUrl + element.url;
        this.imgList.push(element);
      });
      window.sessionStorage.setItem("carousel", JSON.stringify(this.imgList));
    },
    async getRecentRecord() {
      let params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      };
      const res = await this.$axios.post(
        `${this.HOST}/record/api/timelineRecord`,
        params
      );
      // console.log("res=", res);
      if (res.data.meta.code == 200) {
        this.recordList = this.recordList.concat(res.data.data.recordList.list);
        this.currentPage++;
      }
    },
  },
};
</script>
<style lang="less" scoped>
#content {
  .carousel {
    width: 1000px;
    margin: auto;
    margin-bottom: 30px;
    margin-top: 20px;

    .el-carousel__item {
      // width: 600px;
      border-radius: 20px;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.212);
    }

    .carousel_img {
      height: 100%;
      width: 100%;
      // background-size: cover;
    }
  }

  .timeline {
    // x: -50px;
    min-width: 900px;
    color: white;
    font-weight: bold;
    font-size: 26px;
    width: 60%;
    margin: auto;

    /deep/.el-timeline-item__timestamp.is-top {
      color: #ffffff;
    }

    .timehead {
      font-size: 20px;
      width: 100%;
      text-align: center;
    }
  }

  img {
    width: 200px;
  }
}

/*底部加载中的图标*/
.loading {
  width: 100px;
  margin: auto;
  font-size: 30px;
  text-align: center;
}

/**
 * 走马灯的左右指示器
 */
/deep/ .el-carousel__arrow {
  display: none;
}
</style>